<template>
  <main>
    <van-field 
      v-model="oldPassword" 
      type="password" 
      clearable
      label="原密码" 
      placeholder="请输入原密码"/>
    <van-field v-model="newPassword" type="password" clearable label="新密码" placeholder="请输入不少于6位数密码"/>
    <van-field v-model="confirmPaasword" type="password" clearable label="确定密码" placeholder="请再次确认密码"/>
    <van-button 
      class="new-btn"
      color="linear-gradient(to right, #FF9800, #FF5722)"
      @click="onSubmit"
      block>
      确认修改
    </van-button>
  </main>
</template>

<script>
import { Dialog, Toast } from 'vant';
import * as Api from 'api'

export default {
  name: 'home-view',
  data() {
    return {
      oldPassword: '',
      newPassword: '',
      confirmPaasword: ''
    }
  },
  created() {
    this.$emit('showTabMenu', false);
  },
  methods: {
    onSubmit() {
      if (!this.confirmPaasword || !this.oldPassword || !this.newPassword){
        Toast('密码不能为空!')
        return
      }
      if (this.oldPassword.length < 6 || this.newPassword.length < 6 || this.confirmPaasword.length < 6) {
        Toast('密码长度不能小于6位！')
        return
      }
      if (this.newPassword !== this.confirmPaasword) {
        Toast('2次密码输入不一致！')
        return
      }
      let params = {
        old_password: this.oldPassword,
        new_password: this.newPassword
      }
      Api.ResetPassword(params).then(res => {
        console.log(res);
        Toast('密码修改成功！')
        setTimeout(() => {
          this.$router.push({name: 'Personal'})
        }, 2000)
      }).catch(() => {

      })
    },
  }
}
</script>

<style scoped>
main{
  padding-top: 40px;
}
.new-btn{
  margin: 60px auto;
  width: 90%;
}
</style>
